<template>
    <div>
        这是首页

        <van-tabs v-model:active="active">
            <van-tab title="标签 1">
                <div v-for="item in list" :key="item.id">
                    <dl>
                        <dt><img :src="item.img" alt="" width="120" height="120"></dt>
                        <dd>
                            <h3>{{ item.title }}</h3>
                        </dd>
                    </dl>
                </div>
            </van-tab>
            <van-tab title="标签 2">内容 2</van-tab>
            <van-tab title="标签 3">内容 3</van-tab>
            <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>


        <van-tabbar route>
            <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item replace to="/shop" icon="search">商品</van-tabbar-item>
            <van-tabbar-item replace to="/msg" icon="search">消息</van-tabbar-item>
            <van-tabbar-item replace to="/mine" icon="search">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import axios from 'axios'

     const active = ref(0);
     const list = ref([])

     const getdate = () =>{
        axios.get('/api/list').then(res =>{
            list.value = res.data
        })
     }

     getdate()
</script>